<template>
	<view :class="formItem.config.class">
		<template v-if="formItem.config.model == 'appModel3'">
			<view class="shop-title-content flex-normal">
				<view class="title-content flex-center">        
					<text class="title-txt"
					:style="{
						'font-family': setAttr('title', 'fontFamily'),
						'font-size': pxToRpx(setAttr('title', 'fontSize')),
						'color': setAttr('title', 'color'),
					}">{{ setAttr('title', 'text')}}</text>
				</view>
			</view>
			<view class="shop-content" :style="{
				'background-color': setAttr('formItem', 'backgroundColor'),
				'border-radius': pxToRpx(setAttr('formItem', 'borderRadius')),
			}">
				<view class="shop-logo-content">
					<image class="shop-logo" :src="getShopCover(shopInfo.imgUrlVos)" mode="aspectFit"></image>
				</view>
				<view class="shop-info-content flex-between">
					<view class="info-left">
						<view class="info-item flex-normal">
							<image class="shop-icon-content" src="@/static/shop-icon@2x.png"></image>
							<text class="info-txt">{{shopInfo.shopName}}</text>
						</view>
						<view class="info-item flex-normal" @click="openMap">
							<image class="shop-icon-content" src="@/static/address-icon@2x.png"></image>
							<text class="info-txt"> {{shopInfo.shopAddress}}</text>
						</view>
					</view>
					<view class="info-right info-btn flex-center" @click="callPhone">
						<image class="shop-icon-content" src="@/static/phone-icon@2x.png"></image>
						<text class="btn-txt">拨打电话</text>
					</view>
				</view>
			</view>
		</template>
    <template v-if="formItem.config['model'] == 'appModel5'">
      <view class="model-5-content">
        <view class="title-content flex-center">
          <view class="title-txt"
            :style="{							
							'font-family': setAttr('title', 'fontFamily'),
							'font-size': pxToRpx(setAttr('title', 'fontSize')),
							'color': setAttr('title', 'color'),
            }">{{ setAttr('title', 'text')}}</view>
        </view>
        <view class="shop-content" :style="{
          'background-color': setAttr('formItem', 'backgroundColor'),
          'border-radius': pxToRpx(setAttr('formItem', 'borderRadius')),
        }">
          <view class="shop-logo-content">
            <image class="shop-logo" :src="getShopCover(shopInfo.imgUrlVos)" mode="aspectFit"></image>
          </view>
          <view class="shop-info-content flex-column">
            <view class="info-top flex-between">
              <view class="info-item">
                <view class="info-label"
                :style="{
									'font-family': setAttr('infoLabel', 'fontFamily'),
									'font-size': pxToRpx(setAttr('infoLabel', 'fontSize')),
									'color': setAttr('infoLabel', 'color'),
                }">店铺名称:</view>
                <view class="info-txt ellipsis-1"
                :style="{
									'font-family': setAttr('infoDesc', 'fontFamily'),
									'font-size': pxToRpx(setAttr('infoDesc', 'fontSize')),
									'color': setAttr('infoDesc', 'color'),
                }">{{shopInfo.shopName}}</view>
              </view>
              <view class="info-item">
                <view class="info-label"
                :style="{
									'font-family': setAttr('infoLabel', 'fontFamily'),
									'font-size': pxToRpx(setAttr('infoLabel', 'fontSize')),
									'color': setAttr('infoLabel', 'color'),
                }" @click="callPhone">联系方式:</view>
                <view class="info-txt ellipsis-1"
                :style="{
									'font-family': setAttr('infoDesc', 'fontFamily'),
									'font-size': pxToRpx(setAttr('infoDesc', 'fontSize')),
									'color': setAttr('infoDesc', 'color'),
                }"> {{shopInfo.csTel}}</view>
              </view>
            </view>
            <view class="info-bottom">
              <view class="info-label"
                :style="{
									'font-family': setAttr('infoLabel', 'fontFamily'),
									'font-size': pxToRpx(setAttr('infoLabel', 'fontSize')),
									'color': setAttr('infoLabel', 'color'),
                }">门店位置:</view>
              <view class="info-txt"
                :style="{
									'font-family': setAttr('infoDesc', 'fontFamily'),
									'font-size': pxToRpx(setAttr('infoDesc', 'fontSize')),
									'color': setAttr('infoDesc', 'color'),
                }" @click="openMap">{{shopInfo.shopAddress}}</view>
            </view>
          </view>
        </view>
      </view>
    </template>
	</view>
</template>

<script>
	import { getShopInfo } from '@/api/hd/index.js'
	import {pxToRpx} from './tools.js'
	import wechat from '@/script/wechat.js'
	import wxSDK from 'jweixin-module'
	import { mapActions } from 'vuex'
	export default {
		
		props: {
			formItem:{
				type: Object,
				default: {}
			}
		},
		data(){
			return {
				routeParams: {},
				shopInfo: {}
			}
		},
		mounted(){
			this.routeParams = uni.getStorageSync('icar-wxActive')
			this.getShopInfo()
		},
		methods: {
			...mapActions(['setLocation']),
			callPhone(){
				uni.makePhoneCall({
					phoneNumber: this.shopInfo['csTel']
				})
			},
			openMap(){
				let _self = this
				const {latitudeAndLongitude, shopAddress, shopName} = this.shopInfo
				let arr = latitudeAndLongitude.split(',') || []
				let params = {
					name: shopName,
					address: shopAddress,
					latitude: parseFloat(arr[0] || '0'),
					longitude: parseFloat(arr[1] || '0')
				}
				if (wechat?.isWechat()) {
					wechat.callOpenLocation(params)
				}
			},
			getLocation(marker){
				let _self = this
				if (wechat?.isWechat()) {
					wechat.callLocation((location) => {
						console.log(location, 333)
						_self.setLocation(location)
					}, (err) => {}, marker)
				}
			},
			getShopCover(list){
				if(!list || !list.length) return ''
				return list[0]['url']
			},
			pxToRpx: pxToRpx,
			setAttr(configKey, valKey){
				let _self = this
				if(configKey == 'formItem'){
					return _self.formItem['configH5'][valKey]
				}else{
					if(!_self.formItem[configKey]) return
					return _self.formItem[configKey]['configH5'][valKey]
				}				
			},
			getShopInfo(){
				let _self = this
				if(!_self.routeParams['a']) return
				getShopInfo(_self.routeParams['a']).then(res => {
					let {latitudeAndLongitude} = res.data
					let arr = (latitudeAndLongitude || '').split(',')
					_self.shopInfo = res.data
					_self.getLocation({latitude: arr[0], longitude: arr[1]})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// px 转为 rpx 的函数
	@function rem($px) {
	  @return $px * 1rpx;
	}
	.shop-icon-content{
		height: 30rpx;
		width: 30rpx;
		margin-right: 10rpx;
	}
	.app-model-3.shop-model{
		position: relative;
		padding-top: 50rpx;
		.shop-title-content{
			min-width: 310rpx;
			height: 85rpx;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			background-color: #FECD8A;
			border-radius: 10rpx;
			.title-content{
				position: relative;
				flex: 1;
				&::after, &::before{
					content: '';
					position: absolute;
					width: 14rpx;
					height: 14rpx;
					top: 50%;
					transform: translateY(-50%);
					background-color: #fff;
					border-radius: 50%;
				}
				&::before{
					left: 50rpx;
				}
				&::after{
					right: 50rpx;
				}
			}
		}
		.shop-content{
			padding: 70rpx 55rpx 40rpx;
			.shop-logo-content{
				height: 300rpx;
				.shop-logo{
					display: block;
					width: 100%;
					height: 100%;
				}        
			}
			.shop-info-content{
				padding-top: 30rpx;
				.info-left{
					margin-bottom: 30rpx;
					.icon{
						font-size: 30rpx;
						margin-right: 8rpx;
					}
					.info-item{
						margin-bottom: 20rpx;						
						&:last-child{
							margin-bottom: 0;
						}
						.info-txt{
							font-size: 24rpx;
							color: #333;
							width: 300rpx;
						}
					}
				}
				.info-btn{
					min-width: 200rpx;
					height: 70rpx;
					color: #333;
					font-size: 28rpx;
					border-radius: 34rpx;
					border: 1rpx solid #333333;
				}
			}
		}
	}
	
	.app-model-5.shop-model{
		.model-5-content{
			border-radius: rem(10);
			box-shadow: rem(3) 0 rem(7) 0 #1863B2;
			.title-content{
				height: rem(137);
				background: url('/static/image/app-model-5/title-bg.png') no-repeat center;
				background-size: contain;
				font-weight: bold;
			}
			.package-desc{
				line-height: 2.4;
				padding: 0 rem(30);
			}
		}
		.shop-content{
			padding: rem(30);
			.shop-logo-content{
				height: rem(300);
				border-radius: rem(10);
				overflow: hidden;
				.shop-logo{
					display: block;
					width: 100%;
					height: 100%;
				}        
			}
			.shop-info-content{
				padding-top: rem(30);
				.info-txt{
					margin-top: rem(10);
				}
				.info-label{
					font-weight: bold;
				}
				.info-item{
					width: 50%;
				}
				.info-bottom{
					margin-top: rem(20);
				}
			}
		}
	}
</style>